import {
  Card,
  Breadcrumb,
  Form,
  Button,
  Radio,
  Input,
  Upload,
  Space,
  Select,
  message,
} from "antd";

import { PlusOutlined } from "@ant-design/icons";

import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";

// 导入 Link 组件
import { Link, useSearchParams } from "react-router-dom";
// 导入样式文件
import "./index.scss";
import { useEffect, useState } from "react";
import {
  getChannelApi,
  createArticleApi,
  updateArticleApi,
  getArticleByIdApi,
} from "@/apis/article";

// 导入hooks
//import useChannel from "@/hooks/useChannel";

const { Option } = Select;

export default function Publish() {
  // 获取频道列表
  //let channelList = useChannel();
  const [channelList, setChannelList] = useState([]);
  useEffect(() => {
    const getChannelList = async () => {
      const res = await getChannelApi();
      setChannelList(res.data.channels);
    };
    getChannelList();
  }, []);

  // 图片列表
  const [imageList, setImageList] = useState([]);
  // 图片上传回调
  const onUploadChange = (info) => {
    // 图片上传成功后，将图片地址添加到图片列表中
    setImageList(info.fileList);
  };

  // 图片类型， 0-无图， 1-单图， 3-三图
  const [imageType, setImageType] = useState(0);
  // 单选按钮回调函数
  const onRadioChange = (e) => {
    setImageType(e.target.value);
  };
  //编辑-获取参数文章id
  // useSearchParams 用于获取url参数
  const [searchParams] = useSearchParams();
  // 获取文章id
  const articleId = searchParams.get("id");
  // 表单提交
  const onFinish = (formData) => {
    console.log(formData);
    // 校验封面类型 imageType 是否和图片数量是否相等
    if (imageType !== imageList.length) {
      return message.error("封面类型和图片数量不匹配");
    }
    const { title, content, channel_id } = formData;
    // 按接口文档的格式处理数据
    const reqData = {
      title, // 标题
      content, // 内容
      cover: {
        // 封面
        type: imageType, // 封面类型：1-图片，0-无图
        // 封面图片列表
        // 这里逻辑是新增文章时的逻辑
        images: imageList.map((item) => {
          if (item.response) {
            return item.response.data.url;
          } else {
            return item.url;
          }
        }),
      },
      channel_id, // 频道id
    };

    // 调用创建文章接口
    if (articleId) {
      // 编辑文章
      updateArticleApi({ ...reqData, id: articleId });
    } else {
      // 新增文章
      createArticleApi(reqData);
    }

    // 跳转到文章详情页
  };

  //编辑-回填数据
  //获取实例
  const [form] = Form.useForm();
  //组件渲染完毕后，获取文章数据
  useEffect(() => {
    // 1、通过文章id数据获取数据
    const getArticleId = async () => {
      let res = await getArticleByIdApi(articleId);
      console.log("res.data", res.data);
      const data = res.data;
      const { cover } = data;
      // 2、调用实例方法 完成回填，设置表单初始值
      form.setFieldsValue({
        ...data,
        /*
           setFieldsValue 需要的数据类型是： type : 1 , 而 res.data的数据类型是： cover :{ type: 1, images: []}
          */
        type: cover.type,
      });
      // 设置图片类型
      setImageType(cover.type);
      setImageList(
        cover.images.map((item) => {
          return { url: item };
        })
      );
    };

    // 如果 文章id存在，则调用获取文章数据接口
    if (articleId) {
      getArticleId();
    }
  }, [articleId, form]);

  return (
    <div className="publish">
      <Card
        title={
          <Breadcrumb
            items={[
              { title: <Link to={"/"}>首页</Link> },
              { title: articleId ? "编辑文章" : "发布文章" },
            ]}
          />
        }
      >
        <Form
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 16 }}
          // 表单初始值
          initialValues={{ type: 0 }}
          // 表单提交后回调函数
          onFinish={onFinish}
          form={form}
        >
          {/* 文章标题 */}
          <Form.Item
            label="标题"
            name="title"
            rules={[{ required: true, message: "请输入文章标题" }]}
          >
            <Input placeholder="请输入文章标题" style={{ width: 400 }} />
          </Form.Item>

          {/* 频道选择下拉框 */}
          <Form.Item
            label="频道"
            name="channel_id"
            rules={[{ required: true, message: "请选择文章频道" }]}
          >
            <Select placeholder="请选择文章频道" style={{ width: 400 }}>
              {channelList.map((item) => {
                return (
                  <Option key={item.id} value={item.id}>
                    {item.name}
                  </Option>
                );
              })}
            </Select>
          </Form.Item>

          {/* 封面上传 */}
          <Form.Item label="封面">
            <Form.Item name="type">
              <Radio.Group onChange={onRadioChange}>
                <Radio value={1}>单图</Radio>
                <Radio value={3}>三图</Radio>
                <Radio value={0}>无图</Radio>
              </Radio.Group>
            </Form.Item>
            {imageType > 0 && (
              <Upload
                name="image"
                // 上传列表样式
                listType="picture-card"
                // 文件列表, 用于显示已上传的文件
                showUploadList
                //  图片上传地址
                action={"http://geek.itheima.net/v1_0/upload"}
                onChange={onUploadChange}
                // 最多上传图片数量， 限制图片数量
                maxCount={imageType}
                fileList={imageList}
              >
                <div style={{ marginTop: 8 }}>
                  <PlusOutlined />
                </div>
              </Upload>
            )}
          </Form.Item>

          {/* 内容编辑器 */}
          <Form.Item
            label="内容"
            name="content"
            rules={[{ required: true, message: "请输入文章内容" }]}
          >
            <ReactQuill
              className="publish-quill"
              theme="snow"
              placeholder="请输入文章内容"
            />
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 4 }}>
            <Space>
              <Button size="large" type="primary" htmlType="submit">
                发布文章
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
}
